import * as React from 'react'
import { Tabs, Breadcrumb } from 'antd'
import { Link } from 'react-router-dom'
import * as style from './index.less'
import { menuRouters } from '../../router/Router'

const { TabPane } = Tabs
export interface IPageHeaderProps {
  title?: React.ReactNode | string
  logo?: React.ReactNode | string
  action?: React.ReactNode | string
  location?: any
  content?: React.ReactNode 
  extraContent?: React.ReactNode
  routes?: any[]
  params?: any
  breadcrumbList?: Array<{ title: React.ReactNode; href?: string }>
  tabList?: Array<{ key: string; tab: React.ReactNode }>
  tabActiveKey?: string
  tabDefaultActiveKey?: string
  onTabChange?: (key: string) => void
  tabBarExtraContent?: React.ReactNode
  linkElement?: React.ReactNode
  breadcrumbSeparator?: string
}

export interface IPageHeaderState {
  breadcrumb: any
}

export default class PageHeader extends React.Component<IPageHeaderProps, IPageHeaderState> {

  state = {
    breadcrumb: null
  }

  componentDidMount() {
    this.getBreadcrumbDom()
  }

  onChange = (key: any) => {
    const { onTabChange } = this.props
    if (onTabChange) {
      onTabChange(key)
    }
  }
  /**
   * 获取面包屑
   */
  getBreadcrumbDom = (): void => {
    const breadcrumb = this.conversionBreadcrumbList()
    this.setState({
      breadcrumb,
    })
  }

  /**
   * 将路由格式化为面包屑参数
   */
  filterRouter = (): any => {
    let breadcrumbNameMap = new Object()
    menuRouters.map( (row: any) => {
      breadcrumbNameMap[row.path] = row.name
    })
    return breadcrumbNameMap
  }
  /**
   * 将参数转化为面包屑
   * Convert parameters into breadcrumbs
   */
  conversionBreadcrumbList = () :any => {
    const breadcrumbNameMap = this.filterRouter()
    const pathSnippets = location.hash.substring(1,location.hash.length).split('/').filter((i: any) => i)
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
      const urls = pathSnippets.slice(0, index + 1)
      let url = ''
      if(urls[0]=='msqr'&&urls[1]=='list') {
        if(urls.length==3) url='/msqr/list/:id'
      }else {
        url = `/${urls.join('/')}`
      }
      if(url) return (
        <Breadcrumb.Item key={url}>
          <Link to={url}>
            {breadcrumbNameMap[url]}
          </Link>
        </Breadcrumb.Item>
      )
      else return <span key={url}></span>
    })
    const breadcrumbItems = [(
      <Breadcrumb.Item key="home">
        <Link to="/">首页</Link>
      </Breadcrumb.Item>
    )].concat(extraBreadcrumbItems)

    return breadcrumbItems
  }


  render () {
    const {
      title,
      logo,
      action,
      content,
      extraContent,
      tabList,
      tabActiveKey,
      tabDefaultActiveKey,
      tabBarExtraContent,
    } = this.props
    const { breadcrumb } = this.state

    const activeKeyProps: any = {}
    if (tabDefaultActiveKey !== undefined) {
      activeKeyProps.defaultActiveKey = tabDefaultActiveKey
    }
    if (tabActiveKey !== undefined) {
      activeKeyProps.activeKey = tabActiveKey
    }
    return (
      <div className={style.pageHeader}>
        <Breadcrumb className={style.breadcrumb}>
          {breadcrumb}
        </Breadcrumb>
        <div className={style.detail}>
          {logo && <div className={style.logo}>{logo}</div>}
          <div className={style.main}>
            <div className={style.row}>
              {title && <h1 className={style.title}>{title}</h1>}
              {action && <div className={style.action}>{action}</div>}
            </div>
            <div className={style.row}>
              {content && <div className={style.content}>{content}</div>}
              {extraContent && <div className={style.extraContent}>{extraContent}</div>}
            </div>
          </div>
        </div>
        {tabList && tabList.length ? (
          <Tabs
            className={style.tabs}
            {...activeKeyProps}
            onChange={this.onChange}
            tabBarExtraContent={tabBarExtraContent}
          >
            {tabList.map(item => (
              <TabPane tab={item.tab} key={item.key} />
            ))}
          </Tabs>
        ) : null}
      </div>
    )
  }
}